<template>
  <div class="we-chat-template table-theme">
    <head-title title="公众号--微信消息模板"></head-title>
    <el-card>
      <div class="top-menu">
        <div class="menu-left"></div>
        <div class="menu-right">
          <refresh-button @refresh="refreshPage"></refresh-button>
          <div class="add">
            <el-button type="primary" @click="onOpenDialog('add')"
              >添加模板</el-button
            >
          </div>
        </div>
      </div>
      <p class="data-number">总列表数：{{ total }}</p>
      <el-table :data="list" stripe>
        <el-table-column label="序号" align="center" width="140" prop="id">
        </el-table-column>
        <el-table-column
          label="模板ID"
          align="center"
          prop="template_id"
        ></el-table-column>
        <el-table-column
          label="标题"
          align="center"
          prop="name"
        ></el-table-column>
        <el-table-column
          label="详细内容"
          align="center"
          prop="title"
        ></el-table-column>
        <el-table-column
          label="关键字1"
          align="center"
          prop="keyword1"
        ></el-table-column>
        <el-table-column
          label="关键字2"
          align="center"
          prop="keyword2"
        ></el-table-column>
        <el-table-column
          label="关键字3"
          align="center"
          prop="keyword3"
        ></el-table-column>
        <el-table-column
          label="关键字4"
          align="center"
          prop="keyword4"
        ></el-table-column>
        <el-table-column
          label="关键字5"
          align="center"
          prop="keyword5"
        ></el-table-column>
        <el-table-column
          label="备注"
          align="center"
          prop="remark"
        ></el-table-column>
        <el-table-column label="上下架" align="center">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              :active-value="1"
              :inactive-value="2"
              @change="upDown($event, scope.row.id)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column
          label="时间"
          align="center"
          prop="add_time"
          width="220"
        ></el-table-column>
        <el-table-column label="操作" align="center" width="220">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="onOpenDialog('details', scope.row.id)"
              >详情</el-button
            >
            <el-button
              type="primary"
              size="mini"
              @click="onOpenDialog('edit', scope.row.id)"
              >编辑</el-button
            >
            <el-button type="danger" size="mini" @click="onDel(scope.row.id)"
              >刪除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pages">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="total"
          @current-change="init"
          :current-page="page"
          :page-size="limit"
        ></el-pagination>
      </div>
    </el-card>
    <el-dialog
      :title="title"
      :visible.sync="is_dialog"
      width="600px"
      center
      :modal-append-to-body="false"
      @close="onClose('chatForm')"
      top="10vh"
    >
      <el-form
        :model="chatForm"
        :rules="chatFormRules"
        ref="chatForm"
        label-width="120px"
      >
      <el-form-item label="模板ID:" prop="template_id">
          <el-input
            v-model.trim="chatForm.template_id"
            placeholder="请输入模板ID"
            :disabled="type === 'details'"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="标题:" prop="name">
          <el-input
            v-model.trim="chatForm.name"
            placeholder="请输入标题"
            :disabled="type === 'details'"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="详细内容:" prop="title">
          <el-input
            v-model.trim="chatForm.title"
            :disabled="type === 'details'"
            placeholder="请输入详细内容"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="关键字1:" prop="keyword1">
          <el-input
            v-model.trim="chatForm.keyword1"
            :disabled="type === 'details'"
            placeholder="请输入关键字1"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="关键字2:" prop="keyword2">
          <el-input
            v-model.trim="chatForm.keyword2"
            :disabled="type === 'details'"
            placeholder="请输入关键字2"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="关键字3:" prop="keyword3">
          <el-input
            v-model.trim="chatForm.keyword3"
            :disabled="type === 'details'"
            placeholder="请输入关键字3"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="关键字4:" prop="keyword4">
          <el-input
            v-model.trim="chatForm.keyword4"
            :disabled="type === 'details'"
            placeholder="请输入关键字4"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="关键字5:" prop="keyword5">
          <el-input
            v-model.trim="chatForm.keyword5"
            :disabled="type === 'details'"
            placeholder="请输入关键字5"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="备注:" prop="remark">
          <el-input
            v-model.trim="chatForm.remark"
            :disabled="type === 'details'"
            placeholder="请输入备注"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="备注:" prop="remark">
          <el-switch
            v-model="chatForm.status"
            :active-value="1"
            :inactive-value="2"
            :disabled="type === 'details'"
          ></el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onClose('chatForm')">取 消</el-button>
        <el-button
          type="primary"
          @click="onSubmit('chatForm')"
          v-if="type !== 'details'"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "we_chat_template",
  data() {
    return {
      list: [],
      limit: 30,
      page: 1,
      total: 0,
      title: "添加模板",
      type: "add",
      is_dialog: false,
      chatForm: {
        name: "",
        title: "",
        status: 1,
        keyword1: "",
        keyword2: "",
        keyword3: "",
        keyword4: "",
        keyword5: "",
        remark: "",
        template_id:''
      },
      chatFormRules: {
          name: [{ required: true, message: "必填项不能为空" }],
          title: [{ required: true, message: "必填项不能为空" }],
          status: [{ required: true, message: "必填项不能为空" }],
          template_id: [{ required: true, message: "必填项不能为空" }],
      },
    };
  },
  created() {
    this.init(1);
  },
  methods: {
    // 清除搜索内容
    refreshPage() {
      this.page = 1;
      this.init(this.page);
    },
    init(e) {
      this.page = e;
      let data = {
        page: e ? e - 1 : 0,
        limit: this.limit,
      };
      this.$http(this.$ApiList.WxTemplateList, data).then((res) => {
        this.list = res.datas.data;
        this.total = res.datas.count;
      });
    },
    onOpenDialog(type, id) {
      this.type = type;
      switch (type) {
        case "add":
          this.title = "添加模板";
          break;
        case "edit":
        case "details":
          this.title = type === "edit" ? "编辑模板" : "模板详情";
          this.$http(this.$ApiList.WxTemplateInfo, { id }).then((res) => {
            delete res.datas.add_time;
            this.chatForm = res.datas;
          });
          break;
        default:
          break;
      }
      this.is_dialog = true;
    },
    upDown(status, id) {
      if (status) {
        this.$http(this.$ApiList.WxTemplateDown, { id, status });
      }
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.type === "add") {
            this.$delete(this.chatForm,'id')
              this.$http(this.$ApiList.WxTemplateAdd,this.chatForm).then(res=>{
                  this.$message.success(res.datas)
                  this.init(this.page)
                  this.is_dialog = false
                  this.$refs[formName].resetFields();
              })
          } else {
              this.$http(this.$ApiList.WxTemplateEdit,this.chatForm).then(res=>{
                  this.$message.success(res.datas)
                  this.init(this.page)
                  this.is_dialog = false
                  this.$refs[formName].resetFields();
              })
          }
        }
      });
    },
    onClose(formName) {
      this.is_dialog = false;
      this.$refs[formName].resetFields();
    },
    onDel(id){
      this.$confirm('此操作将删除该数据，是否继续?','提示',{
        confirmButtonText:'确定',
        cancelButtonText:'取消',
        type:'warning'
      }).then(()=>{
        this.$http(this.$ApiList.WxDelTemplate,{id}).then(res=>{
          this.init(this.page)
          this.$message.success(res.datas)
        })
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.we-chat-template {
}
</style>